<template>
  <div class="bQuestionManagement">
      <Card style="margin-top: 25px;">
       <Button @click="add">新增</Button>
        <Card style="width:100%">
          <div style="text-align:center">
            <Table :data="bQData" :columns="bQColumns" stripe></Table>
            <Page :total="total" show-elevator style="margin-top: 10px" @on-change="changePage"/>
          </div>
        </Card>
      </Card>
    <Modal
      v-model="modalS"
      title="公告问题管理"
     >
      <Form ref="bQForm" :model="bQForm" :rules="ruleValidate" :label-width="80" style="width: 240px;margin: 0 auto" on-validate>
        <FormItem prop="textType">
          <RadioGroup v-model="bQForm.textType">
            <Radio label="1">公告</Radio>
            <Radio label="2">问题</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem prop="show">
          <RadioGroup v-model="bQForm.show">
            <Radio label="0">显示</Radio>
            <Radio label="1">不显示</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="问题" prop="proName" v-if="bQForm.textType=='2'">
          <Input v-model="bQForm.proName" placeholder="输入问题"></Input>
        </FormItem>
        <FormItem label="回答" prop="answer" v-if="bQForm.textType=='2'">
          <Input v-model="bQForm.answer" placeholder="输入回答"></Input>
        </FormItem>
        <FormItem label="公告" prop="answer" v-if="bQForm.textType=='1'">
          <Input v-model="bQForm.answer" placeholder="输入公告"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button @click="ok">发布</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "bQuestionManagement",
    data(){
      return{
        total:0,
        isUpdete:false,
        bQData:[{
          textType:'1',
          show:'0',
          answer:'免费账号注册'
        }],
        modalS:false,
        loading:true,
        bQForm:{
          pageNumber:1,
          pageSize:10,
          startTime:null,
          endTime:null,
          textType:"1",
          textId:'',
          proName:'',
          answer:'',
          show:'0',
        },
        bQColumns:[
          {
            title: '信息类型',
            key: 'textType',
            render: (h, params) => {
              let state = '';
              if (params.row.textType=='1'){
                this.state = '公告'
              } else{
                this.state = '问答'
              }
              return h('div', [
                h('div', {
                }, this.state),
              ]);
            }
          },
          {
            title: '问题',
            key: 'proName',
          },

          {
            title: '回答/公告内容',
            key: 'answer',
          },
          {
            title: '是否显示',
            key: 'show',
            render: (h, params) => {
              let state = '';
              if (params.row.show=='0'){
                this.state = '显示'
              } else{
                this.state = '不显示'
              }
              return h('div', [
                h('div', {
                }, this.state),
              ]);
            }
          },
          {
        title: '操作',
          key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
        return h('div', [
          h('Button', {
            props: {
              type: 'primary',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.modalS = true
                this.isUpdete = true
                this.bQForm = params.row
              }
            }
          }, '修改'),
          h('Button', {
            props: {
              type: 'error',
              size: 'small'
            },
            on: {
              click: () => {
                this.$Modal.confirm({
                  title:'确认删除',
                  content:'您确定删除所点击的数据?',
                  onOk:() => {
                    //    删除
                    this.delete(params.row.textId);
                  },
                  onCancel:() => {
                    this.$Message.info("取消了当前操作")
                  }
                })
              }
            }
          }, '删除')
        ]);
      }
        }],
      ruleValidate: {
          textType: [
            {required: true, message: '请选择信息种类', trigger: 'blur'}
            ],
          show: [
            {required: true, message: '是否显示', trigger: 'blur'}
            ],
          answer: [
            {required: true, message: '请输入内容', trigger: 'blur'}
            ],
          proName: [
            {required: true, message: '请输入标题', trigger: 'blur'}
            ],
        },
      bQSearch:{
        pageNumber:1,
        pageSize:10,
      }
      }
    },
    methods:{
      ok () {
        this.$refs['bQForm'].validate((valid) => {
          if (valid) {
              if (this.isUpdete){
                this.bQForm.createTime = null
                axios.get("http://localhost:8888/otherController/updatePQ",{params:this.bQForm}).then(res => {
                  if (res){
                    this.$Message.success('修改成功!');
                    this.getData()
                  }else{
                    this.$Message.error('修改失败!');
                  }
                })
                this.modalS = false
                this.handleReset('bQForm')
              }else{
                axios.get("http://localhost:8888/otherController/addPQ",{params:this.bQForm}).then(res => {
                  if (res){
                    this.$Message.success('添加成功!');
                    this.getData()
                  }else{
                    this.$Message.error('添加失败!');
                  }
                })
                this.modalS = false
                this.handleReset('bQForm')
              }
          } else {
            this.modalS = true
            this.$Message.error('提交失败,表单验证不通过!');
          }
        })
      },
      cancel () {
        this.modalS = false
        this.$refs['bQForm'].resetFields();
      },
      delete(id){
        axios.get("http://localhost:8888/otherController/delete",{params:{id:id}}).then(res => {
          if (res){
            this.$Message.success("删除成功")
            this.getData()
          }else{
            this.$Message.success("删除失败")
          }
        })
      },
      add(){
        this.isUpdete = false
        this.modalS=true
        this.bQForm={
          pageNumber:1,
            pageSize:10,
            startTime:null,
            endTime:null,
            textType:"1",
            textId: '',
            proName:'',
            answer:'',
            show:'0',
        }
      },
      changePage(v){
        this.bQSearch.pageNumber = v
        this.getData()
      },
      getData(){
        axios.get("http://localhost:8888/otherController/queryPQ",{params:this.bQSearch}).then(res => {
          this.bQData = res.data.list
          this.total = res.data.total
        })
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped>
  .bQuestionManagement{
    margin:20px 0 0 20px
  }
</style>
